<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      label {
        width: 120px;
        display: inline-block;
        text-align: right;
      }
    </style>
  </head>
  <body>
    <!-- <form action="https://www.jd.com" method="post">提交按钮</form> -->

    <form action="">
      <p>
        <label for="username">普通输入框:</label>
        <input type="text" name="username" value="zhangsan" id="username" />
      </p>
      <p>
        <label for="pw">密码框:</label>
        <input
          type="password"
          name="password"
          placeholder="请输入密码"
          required
          autofocus
          maxlength="10"
          id="pw"
        />
      </p>
      <p>
        <label>提交按钮: </label>
        <input type="submit" />
      </p>
      <p>
        <label>重置按钮: </label>
        <input type="reset" />
      </p>
      <p>
        <label>普通按钮: </label>
        <input type="button" value="普通按钮" />
      </p>
    </form>
  </body>
</html>

<!-- 
  表单是用于搜集用户信息的标签
  form是一个双标签
  容器标签，里面可以放表单控件

  action属性，用于放后端地址的，当用户点击了提交按钮以后，就会自动将输入的内容发送给这个地址
  method属性，表示提交方式，get/post
    get是通过地址栏明文传输，速度快
    post是安全性更高，速度慢


  input标签(表单控件标签)
    type属性
      text: 普通输入框
      password: 密码框
      submit: 提交按钮, 只要点击了提交按钮，就会将上面输入的内容发送到action的地址，同时页面会闪烁
      reset: 重置按钮，点击以后会清空表单的所有的内容
      button: 普通按钮，以后可以自行添加js代码，来实现各种功能

    value属性
      text和password: 作为初始值
      submit/reset/button: 作为按钮的文字
      submit默认value是提交，reset的默认value是重置

    placeholder属性
      描述输入字段预期值的简短的提示信息

    disabled属性
      表示禁用

    required属性
      表示控件必须要有内容

    autofocus属性
      给输入框自动获得焦点
      一个页面只能有一个autofocus

    maxlength属性
      表示最大长度


  label标签
    提示信息标签
    当label标签的for属性和input的id属性对应上的话
    那么当点击label标签的时候，对应的input就会自动获得焦点

    让标签控件进行对应(需要配合css)
    
 -->
